<template>
  <!-- 我的 -->
  <div>
    <div class="foot">
      <img src="@/assets/bg.png" alt="背景图" />
      <van-overlay :show="true" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="block">
            <van-image
              round
              width="5rem"
              height="5rem"
              :src="`http://liufusong.top:8080${imageList}`"
            />
            <div class="book">
              <p>{{ username }}</p>
              <van-button round type="primary" to="/login" v-if="flag">
                去登录
              </van-button>
              <van-button
                class="exit"
                round
                type="primary"
                to="/user"
                v-if="!flag"
              >
                退出
              </van-button>

              <div class="personal" v-if="!flag">
                编辑个人资料
                <van-icon name="play" size="12px" />
              </div>
            </div>
          </div>
        </div>
      </van-overlay>
    </div>

    <!-- 宫格 -->
    <van-grid clickable :column-num="3">
      <van-grid-item icon="star-o" text="我的收藏" to="/myCollection" />
      <van-grid-item icon="wap-home-o" text="我的出租" to="/myRental" />
      <van-grid-item icon="clock-o" text="看房记录" to="/" />
      <van-grid-item icon="credit-pay" text="成为房主" to="/" />
      <van-grid-item icon="contact" text="个人资料" to="/" />
      <van-grid-item icon="service-o" text="联系我们" to="/" />
    </van-grid>

    <van-image
      width="345px"
      height="88.4px"
      src="http://liufusong.top:8080/img/profile/join.png"
    />
  </div>
</template>
<script>
import { getUserInfo, logOut } from '@/api/user'

export default {
  name: 'user-page',
  data () {
    return {
      username: '',
      avatar: '',
      flag: true,
      imageList: ''
    }
  },
  // 获取用户数据
  async created () {
    const { body } = await getUserInfo()
    console.log(body)
    this.username = body.nickname
    this.imageList = body.avatar

    this.flag = !this.flag
  },
  methods: {
    async submitOut () {
      const data = await logOut()
      console.log(data)
      this.$toast.success('退出成功')
    }
  }
}
</script>

<style scoped lang="less">
.foot {
  width: 375px;
  height: 300px;
  img {
    width: 100%;
    height: 191px;
  }
  .van-overlay {
    width: 100%;
    height: 300px;
    background-color: rgba(0, 0, 0, 0);
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      .block {
        width: 318px;
        height: 215px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgba(0, 0, 0, 0);
        margin-top: 84px;
        box-shadow: 0 0 10px 3px #ddd;
        .book {
          width: 318px;
          height: 165px;
          flex-direction: column;
          justify-content: center;
          display: flex;
          align-items: center;
          background-color: #fff;
          p {
            margin-top: -30px;
            margin-bottom: 10px;
            font-size: 13px;
          }
          .exit {
            width: 80px;
            height: 20px;
            font-size: 12px;
            ::v-deep .van-button__content {
              display: flex;
            }
          }
          .personal {
            color: #999;
            font-size: 12px;
            margin-top: 20px;
          }
        }
      }
    }
  }
}

.van-grid {
  margin-top: 15px;
  background-color: #fff;
  .van-grid-item__content {
    border-width: 0 0 0 0;
  }
}

.van-image {
  text-align: center;
  margin: 10px 15px;
}
</style>
